<template>
	<view class="allwrap">
		<view style="position: fixed;width: 686rpx;z-index: 10;">
		<u-search placeholder="搜索内容" v-model="keyword" :show-action="true" :action-text="'取消'" :height="68"></u-search>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="flexal">
			<view class="flexal frame-block" :class="name? 'frame-block-active': ''" @click="openPop = !openPop">
				<view class="block-text lineclamp1">{{name?  name:'来自用户'}}</view>
				<image src="/static/arrow-block.png" style="width: 22rpx;height: 12rpx;margin-left: 14rpx;" v-if="!name"></image>
				<image src="/static/set/8ef6dd608187f342d5547b53dc6220b.png" @click.stop="clear('name')" v-else style="width: 18rpx;height: 18rpx;margin-left: 14rpx;"></image>
			</view>
			<view class="flexal frame-block" :class="time? 'frame-block-active': ''" style="margin-left: 24rpx;" @click="show = !show">
				<view class="block-text">{{time? time:'时间'}}</view>
				<image src="/static/arrow-block.png" style="width: 22rpx;height: 12rpx;margin-left: 14rpx;" v-if="!time" ></image>
				<image src="/static/set/8ef6dd608187f342d5547b53dc6220b.png" @click.stop="clear('time')" v-else style="width: 18rpx;height: 18rpx;margin-left: 14rpx;"></image>
			</view>
			<view style="flex: 1;"></view>
			<view class="reset-text" v-if="time||name" @click="clear(null)">重置</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height':(clientHeight)+'px'}" class="scroll-frame">
			<view class="frame-item" v-for="(item,index) in list " :key="index">
				<image :src="item.avatar" class="icon"></image>
				<view style="margin-left: 24rpx;flex: 1;">
					<view class="name" style="margin-top: 10rpx;">{{item.name}}</view>
					<view class="content" style="margin-top: 10rpx;">{{item.content}}</view>
				</view>
				<view class="time" style="margin-top: 10rpx;">{{item.time}}</view>
			</view>
		</scroll-view>
		
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirmTime"></u-picker>
		
		<peopleAddPopVue :openPop="openPop" :type="popType"  :list="list" @peopleAddCloseSubmit="peopleAddCloseSubmit" :model="1"></peopleAddPopVue>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	import peopleAddPopVue from '../../components/peopleAddPop/peopleAddPop.vue'
	export default {
		data() {
			return {
				keyword:'',
				name:'',							//来自用户
				time:'',							//时间
				openPop:false,						//打开选择弹窗
				popType:2,							//弹窗类型
				// 组织成员
				 list:[
					{
						name:'王小二',
						avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
						content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'王小明',
						avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'李二',
						avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'张三',
						avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老四',
						avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'王五',
						avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老六',
						avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老王',
						avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老李',
						avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				radioIndex:0
			}
		},
		components:{
			peopleAddPopVue
		},
		methods: {
			// 选择用户回调
			peopleAddCloseSubmit(params){
				console.log('触发了',params)
				this.name = this.list[params.radioIndex].name
				this.radioIndex = params.radioIndex
				this.openPop = false
			},
			// 清理筛选条件
			clear(field){
				if(field){
					this[field] = ''
				}else{
					this.name = '',
					this.time = '',
					this.list[this.radioIndex].checked = false
				}
				if(field == 'name'){
					this.list[this.radioIndex].checked = false
				}
			    
			},
			// 日期选择器 
			confirmTime(e){
				console.log('date',e)
				this.time = e.year + '/'+e.month+'/'+e.day
			}
		}
	}
</script>

<style lang="less">
	.frame-block{
		padding: 14rpx 32rpx 14rpx 32rpx;
		background: #EBEBEB;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		max-width: 300rpx;
		color: #3B3B3B;
		.block-text{
			// width: 100%;
			max-width: 200rpx;
			font-weight: 400;
			font-size: 28rpx;
			
		}
		
	}
	.frame-block-active{
		background: #EEF3FF;	
		color: #2953E7;
	}
	.reset-text{
		font-weight: 400;
		font-size: 28rpx;
		color: #2953E7;
	}
	.scroll-frame{
		// background: #000000;
		margin-top: 10rpx;
		
		.frame-item{
			margin-top: 40rpx;
			display: flex;
		}
		.icon{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.name{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.content{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
		.time{
			font-weight: 400;
			font-size: 24rpx;
			color: #9D9D9D;
		}
		
	}
</style>
